<template>
    <div class="container">
        <my-search :fields="fieldsList" :baseNumber="4" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false"/>
        <div class="btn">
            <el-button type="info" plain size="mini" @click="go('add')">新增</el-button>
            <el-button type="info" plain size="mini" @click="del()">删除</el-button>

        </div>
        <div class="table-list">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 210" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="true" @onSelectionChange="onSelectionChange" />

        </div>

    </div>
</template>

<script>

import { queryList, modeldelete, queryQuotasAttribute, updateQuotas } from '@/api/tzyy/mxkc'
export default {
    name: 'Dashboard',

    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '指标类型:',
                    field: 'quotas_attribute',
                    type: 'select',
                    value: '',
                    options: [
                        // { label: '全部', value: '' },
                        // {
                        //     label: '强指标',
                        //     value: '00',
                        // },
                        // {
                        //     label: '弱指标',
                        //     value: '01',
                        // }
                    ]
                },

                {
                    label: '指标名称:',
                    field: 'quotas_name',
                    type: 'text',
                    value: ''
                },


            ],
            //右侧表格开始
            tableColumns: [
                {
                    label: '指标类型',
                    prop: 'quotas_attribute_name',
                    align: 'center',
                    minWidth: 120,
                },
                {
                    label: '指标名称',
                    prop: 'quotas_name',
                    align: 'center',
                    minWidth: 120,

                },
                {
                    label: '状态',
                    prop: 'yxbz',
                    align: 'center',
                    minWidth: 60,
                    render: (h, params) => {
                        // onClick={() => this.upload(params.row)}
                        if (params.row.yxbz == 'Y') {
                            return (
                                <span>
                                    启用
                                </span>
                            );
                        } else if (params.row.yxbz == 'N') {
                            return (
                                <span>
                                    停用
                                </span>
                            );
                        }

                    }
                },

                // {
                //     label: '创建日期',
                //     prop: 'create_time',
                //     align: 'center',
                //     minWidth: 100,

                // },
                {
                    label: '创建人',
                    prop: 'create_by',
                    align: 'center',
                    minWidth: 80,

                },
                {
                    label: '业务说明',
                    prop: 'quotas_desc',
                    align: 'center',
                    minWidth: 250,

                },
                {
                    label: '操作',
                    prop: 'caozuo',
                    align: 'center',
                    width: 180,
                    render: (h, params) => {
                        // onClick={() => this.upload(params.row)}
                        if (params.row.yxbz == 'Y') {
                            return (
                                <span>
                                    <el-button type="text" onClick={() => this.updateState(params.row, 'N')}>停用</el-button>
                                    <el-button type="text" onClick={() => this.go('debug', params.row)}>调试</el-button>
                                    <el-button type="text" onClick={() => this.go('edit', params.row)}>编辑</el-button>
                                    <el-button type="text" onClick={() => this.del(params.row)}>删除</el-button>
                                </span>
                            );
                        } else if (params.row.yxbz == 'N') {
                            return (
                                <span>
                                    <el-button type="text" onClick={() => this.updateState(params.row, 'Y')}>停用</el-button>
                                    <el-button type="text" disabled>调试</el-button>
                                    <el-button type="text" onClick={() => this.go('edit', params.row)}>编辑</el-button>
                                    <el-button type="text" onClick={() => this.del(params.row)}>删除</el-button>
                                </span>
                            );
                        }

                    }
                }




            ],
            tableDatas: []
            , queryObj: {
                quotas_attribute: '',
                quotas_name: '',

                pageNo: 1,
                pageSize: 20
            },
            total: 0,
            selectedRows: [],
            dialogVisible: false,
            dialogLoading: false,
            fileBlob: null,
            fileName: '',
            uploadId: ''
        }
    },

    mounted() {
        this.getTableData();
        this.getQueryQuotasAttribute()
    },
    methods: {
        updateState(row, state) {
            this.loading = true
            updateQuotas({ quotas_id: row.quotas_id, yxbz: state }).then(res => {
                this.loading = false
                if (res.code == 200) {
                    if (state == 'N') {
                        this.$message.success('停用成功')
                        this.getTableData();
                    } else if (state == 'Y') {
                        this.$message.success('启用成功')
                        this.getTableData();
                    }
                }
            })
        },
        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.quotas_name = params.quotas_name || '';
            this.queryObj.quotas_attribute = params.quotas_attribute || '';
            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.getTableData();
        },
        getQueryQuotasAttribute() {
            queryQuotasAttribute().then(res => {
                if (res.code == 200) {
                    this.fieldsList[0].options = res.data.map(item => {
                        return {
                            label: item.attribute_name,
                            value: item.attribute_code
                        }
                    })
                }
            })
        },
        getTableData() {
            this.tableDatas = []
            this.loading = true;
            let params = {
                quotas_name: this.queryObj.quotas_name,
                quotas_type: this.queryObj.quotas_type,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
            }
            queryList(this.queryObj).then(res => {
                console.log(res)
                this.loading = false;
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                }
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        del(param) {

            if (param) {
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    let ids = [param.quotas_id]


                    modeldelete(ids.join(',')).then(result => {
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })
            } else if (this.selectedRows.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let ids = []
                    this.selectedRows.forEach(item => {
                        ids.push(item.quotas_id)
                    })
                    modeldelete(ids.join(',')).then(result => {
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }
        },

        go(name, params) {
            this.$emit('changePage', name, params);
        },

        queryDoc(data) {
            this.dialogVisible = true
            this.dialogLoading = true
            let param = {
                id: data.id,
            }
            query_hyxxk_att(param).then(res => {
                console.log(res)
                if (res.code == 200) {

                    this.dialogLoading = false
                    var raw = window.atob(res.data.file_data);
                    var uInt8Array = new Uint8Array(raw.length);
                    for (var i = 0; i < raw.length; i++) {
                        uInt8Array[i] = raw.charCodeAt(i);
                    }
                    const blob = new Blob([uInt8Array], {
                        type: "application/msword"
                    });
                    this.fileName = res.data.doc_name
                    this.fileBlob = blob
                    let docx = require("docx-preview");
                    this.$nextTick(() => {
                        docx.renderAsync(blob, this.$refs.fileView); // 渲染到页面
                    });
                }


            })
        },
        //上传doc附件
        //s上传名册

    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }
    ::v-deep .undertxt {
        color: rgb(64, 158, 255);
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }
}
</style>
